<template>
	<view class="devicemanage">
		<view class="device_title">
			<view :class="deviceindex==index?'target':''" @click="devicesw(index)"
			 v-for="(item,index) in devicelist" :key="index">{{item.name}}</view>
		</view>
		<view class="device_con">
			<view class="con_module" v-for="(device,index) in devicelist"
			 :key="index" v-show="deviceindex == index">
				<view v-for="(child,index2) in device.child" :key="index2">
					<view class="con_title">{{child.name}}</view>
					<view class="con_content">
						<view class="con_manage" v-for="(item,index3) in child.list"
						 :key="index3" @click="navdetail(item.id,item.name)">
							<image :src="item.mxeapp_img"></image>
							<view class="manage_title">{{item.name}}</view>
							<view class="manage_item">关联: {{item.active_count}}</view>
							<view class="manage_item">绑定: {{item.bind_count}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 弹窗 -->
		<u-select v-model="show" mode="single-column" :title="'请选择'" :list="selectList" @confirm="addmamageFun"></u-select>
	</view>
</template>

<script>
	import { devicedash,devicebindscan } from '../../api/index.js'
	export default {
		data() {
			return {
				show:false,
				deviceindex:0,
				devicelist:[],
				selectList:[
					{
						value: '0',
						label: '手动关联'
					},
					{
						value: '1',
						label: '二维码关联'
					}
				]
			}
		},
		onLoad:function(){
			this.getDevicedash()
		},
		methods: {
			//设备切换
			devicesw:function(index){
				this.deviceindex = index;
			},
			//获取设备列表
			getDevicedash:function(){
				let that = this;
				devicedash().then((res)=>{
					console.log(res);
					if(res.code == 0){
						that.devicelist = res.data;
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch((e)=>{
					console.log(e);
				})
			},
			//跳转到设备详情
			navdetail:function(id,name){
				uni.navigateTo({
					url: '../devicedetail/devicedetail?id='+id+'&name='+name
				});
			},
			//跳转到添加设备界面
			addmamageFun:function(e){
				let index = e[0].value;
				let that = this;
				that.show = false
				if(index == 0){// 手动关联
					uni.redirectTo({
						url: '../deviceadd/deviceadd'
					});
				}else if(index == 1){ //二维码关联
					cm.scanCode({
						success:function(result){
							console.log(result);
							devicebindscan({
								info: result.code_url
							}).then((res) => {
								console.log(res)
								if(res.code == 0){
									uni.showModal({
										title:'提示',
										content:res.data.text,
										complete:function(){
											uni.redirectTo({
												url:'./devicemanage'
											})
										}
									})
								}else{
									uni.showToast({
										icon:'none',
										title:res.msg
									})
								}
							}).catch((e) => {
								console.log(e);
							})
						},
						fail:function(res){
							uni.showToast({
								icon:'none',
								title:'请重新扫码'
							})
						}
					});
				}
			}
		},
		onNavigationBarButtonTap() {
			this.show = true
		}
	}
</script>

<style lang="scss" scoped>
	.devicemanage{
		display: flex;
		font-size: $uni-font-size-base;
		height: 100%;
		.device_title{
			width: 25%;
			color: #666666;
			view{
				padding: 30rpx;
				&.target{
					position: relative;
					color: #000000;
					font-weight: bold;
					&:before{
						content: '';
						position: absolute;
						width: 5rpx;
						height: 30rpx;
						background-color: $uni-color-primary;
						left: 0;top: 35rpx;
					}
				}
			}
			
		}
		.device_con{
			background-color: #F5F5F5;
			width: 75%;
			.con_module{
				.con_title{
					padding: 20rpx;
					color: #999999;
					font-size: $uni-font-size-lg;
				}
				.con_content{
					display: flex;
					margin-top: 20rpx;
					flex-wrap: wrap;
					.con_manage{
						max-width: 41%;
						background-color: #FFFFFF;
						margin: 0 0 20rpx 20rpx;
						padding: 10rpx;
						border-radius: $uni-border-radius-base;
						image{
							width: 200rpx;
							height: 200rpx;
						}
						.manage_title{
							
						}
						.manage_item{
							
						}
					}
				}
			}
		}
	}
</style>
